<template>
	<view style="height: 100%;">
		<!--顶部个人信息栏-->
		<view class="topbg">
			<view class="header-section">
				<view class="flex padding-xl justify-between">
					<view class="flex align-center">

						<image v-if="!user.avatar" src="@/static/images/阳小妹.png" style="width: 120rpx;height: 120rpx">
						</image>
						<image v-if="user.avatar" @click="handleToEditInfo" :src="user.avatar"
							class="cu-avatar xl round" mode="widthFix">
						</image>
						<view class="margin-left-xs" style="color: #fff;">
							<view v-if="!user.id" @click="handleToLogin" class="login-tip">
								点击登录
								<view v-if="!user.id" @click="handleToLogin" class="font-12 margin-top-sm ">
									请先登录
								</view>
							</view>

							<view v-if="user.id" @click="handleToEditInfo" class="user-info action-item">
								<view class="u_title">
									{{ user.realName||'未登录' }}
								</view>
								<view class="u_title font-13 margin-top-sm" style="font-size: 28rpx;">
									{{ user.mobile||'未设置手机号' }}
								</view>
							</view>
						</view>
					</view>
					<view @click="handleToInfo" class="flex align-center" v-if="user.avatar">
						<text style="color:#fff">个人信息</text>
						<view class="iconfont icon-right" style="color: #fff;"></view>
					</view>
				</view>
			</view>
		</view>



		<view class="mine-container bg-white  maoboli padding-sm">

			<view class="">
				<view style="display: flex;  justify-content: space-between;" class="font-title padding-sm">
					<view class="font-title">订单</view>
					<view class="font-content" @click="order(0)">全部订单</view>
				</view>
				<view class=" padding-sm " style="display: flex;">
					<view style="flex: 1;" class="juzhong font-title" @click="order(4)">
						<view>
							<view>
								<image src="@/static/icon/爱护自然.png" style="width: 60rpx;height: 60rpx;"></image>
							</view>

							<view class="font-content">全部</view>
						</view>
					</view>
					<view style="flex: 1;" class="juzhong font-title" @click="order(1)">
						<view>
							<view>
								<image src="@/static/icon/环保袋.png" style="width: 60rpx;height: 60rpx;"></image>
							</view>

							<view class="font-content">待使用</view>
						</view>
					</view>
					<view style="flex: 1;" class="juzhong font-title" @click="order(2)">
						<view>
							<view>
								<image src="@/static/icon/动物生态.png" style="width: 60rpx;height: 60rpx;"></image>
							</view>

							<view class="font-content">已使用</view>
						</view>
					</view>
					<view style="flex: 1;" class="juzhong font-title" @click="order(3)">
						<view>
							<view>
								<image src="@/static/icon/生态地球.png" style="width: 60rpx;height: 60rpx;"></image>
							</view>

							<view class="font-content">退款/取消</view>
						</view>
					</view>
				</view>
			</view>


			<view class="bg-olive radius padding-sm">

				<view style="display: flex;;">

					<view class="margin-left-sm margin-top-xs" style="width: 100%;">

						<view @click="vipInfo" style="display: flex;">
							<view style="margin-right: 20rpx;">
								<image style="width: 40rpx;height: 40rpx;" src="@/static/icon/vips(1).png"></image>
							</view>
							{{getvipTitle()||'非会员'}}<uni-icons type="right" size="15" style="margin-top: 5rpx;"
								color="#fff"></uni-icons>
						</view>


						<view class="flex margin-top">
							<view style="flex: 1;" @click="order(2)">
								<view>
									<view style="font-size: 40rpx;">{{user.vipNumber||0}}</view>
									<view class=" margin-top-xs">
										剩余次数
										<uni-icons type="right" size="14" color="#fff"></uni-icons>
									</view>
								</view>
							</view>
							<view style="flex: 1;" @click="recharge">
								<view class=" " style="font-size: 40rpx;">{{user.vipendDate||'无'}}</view>
								<view class="  margin-top-xs">到期日期</view>
							</view>
						</view>
					</view>
					<view style="">
						<image style=" width: 200rpx;height: 200rpx;"
							src="@/static/images/IMG_202410317508_261x261.png">
						</image>
					</view>
				</view>
			</view>

			<view class="radius margin-top">
				<view>
					<uni-notice-bar single show-icon scrollable :text="tongzhi"></uni-notice-bar>
				</view>
			</view>

			<view class="content-section">
				<view class="mine-actions grid col-4 text-center">
					<view class="action-item" @click="yuanzishezi(1)" v-if="perms.includes('system_user_update')">
						<view class="iconfont" style="color: #fff;">
							<image src="@/static/icon/自然.png" style="color: #fff;width: 70rpx;height: 70rpx;"></image>
						</view>
						<text class="text font-content">院子订单</text>
					</view>
					<view class="action-item" @click="handleHelp(1)">
						<view class="iconfont" style="color: #fff;width: 70rpx;height: 70rpx;">
							<image src="@/static/icon/绿色城市.png" style="color: #fff;width: 70rpx;height: 70rpx;"></image>
						</view>
						<text class="text font-content">常见问题</text>
					</view>
					<view class="action-item" @click="handleAbout">
						<view class="iconfont">
							<image src="@/static/icon/植物.png" style="color: #fff;width: 70rpx;height: 70rpx;">
							</image>
						</view>
						<text class="text font-content">关于我们</text>
					</view>
					<view class="action-item" @click="huiyuanguanli(3)" v-if="perms.includes('system_user_update')">
						<view class="iconfont" style="color: #fff;width: 70rpx;height: 70rpx;">
							<image src="@/static/icon/vips(1).png" style="color: #fff;width: 70rpx;height: 70rpx;">
							</image>
						</view>
						<text class="text font-content">会员管理</text>
					</view>
					<!-- <view class="action-item " @click="liseasdfasd(4)">
						<view class="iconfont" style="color: #fff;width: 70rpx;height: 70rpx;">
							<image src="@/static/icon/绿色城市.png" style="color: #fff;width: 70rpx;height: 70rpx;"></image>
						</view>
						<text class="text font-content">点赞我们</text>
					</view>
					<view class="action-item margin-top-sm" @click="liseasdfasd(5)">
						<view class="iconfont" style="color: #fff;width: 70rpx;height: 70rpx;">
							<image src="@/static/icon/绿色城市.png" style="color: #fff;width: 70rpx;height: 70rpx;"></image>
						</view>
						<text class="text font-content">liseasdfasd(5)</text>
					</view> -->
					<view class="action-item " @click="handleLogout">
						<view class="iconfont" style="color: #fff;width: 70rpx;height: 70rpx;">
							<image src="@/static/icon/生态学.png" style="color: #fff;width: 70rpx;height: 70rpx;"></image>
						</view>
						<text class="text font-content">退出登录</text>
					</view>


				</view>


			</view>

		</view>
		<guaguaLxianxi></guaguaLxianxi>
		<!-- <Tabbar :pageIndex="3"></Tabbar> -->
	</view>
</template>

<script>
	import storage from '@/utils/storage'

	import {
		isNull
	} from "@/utils/validate";
	import {
		getcommon,
		setcommon,
		clear,
		getvipTitle,
		getvipInfo
	} from "@/utils/common";

	export default {
		components: {

		},
		data() {
			return {
				perms: [],
				tongzhi: "加载中",
				avatar: null,
				windowHeight: null,
				user: null,
				tenantId: null,
				swiperDotIndex: 0,
			}
		},
		computed: {

		},
		onShow() {
			this.init()
		},
		onLoad() {


		},
		methods: {
			getvipTitle(data) {
				if (this.user == null) {
					return null
				}
				return getvipTitle(this.user.vipId || null) || null
			},
			change(e) {

			},
			huiyuanguanli() {
				this.$tab.navigateTo('/pages/mine/vipList/vipList')
			},
			yuanzishezi() {
				this.$tab.navigateTo('/pages/mine/yuanzishezi/yuanzishezi')
			},
			recharge() {
				return
				uni.navigateTo({
					url: "/pages/mine/recharge/recharge"
				})
			},
			init() {
				console.log(this.$store.state.user.user);
				if (!isNull(this.$store.state.user.user)) {
					this.$store.dispatch('GetInfo').then((res) => {
						console.log(res);
						this.user = this.$store.state.user.user
					})
				}

				console.log(this.user);
				this.tenantId = this.$store.state.user.user.orgIdsCurrent
				this.windowHeight = uni.getSystemInfoSync().windowHeight - 50
				// this.perms = this.$storage.getItem("perms")



				let asdf = this.$storage.getItem("miniappinfo")
				if (asdf != null) {
					this.tongzhi = asdf.gonggao2.optionValue
				}
				this.getuserInfo()
				this.$forceUpdate()
			},
			getuserInfo() {
				this.$store.dispatch('getState').then((res) => {

					this.perms = res.perms || []
				})

				if (this.name != null) {
					this.$store.dispatch('GetInfo').then((res) => {
						this.user = this.$store.state.user.user
					})
				}
			},
			vipInfo() {
				let data = getvipInfo(this.user.vipId)
				if (data.fwblj == null) {
					uni.showModal({
						title: "商家未设置该会员权益",
						content: "请联系商家说明会员权益"
					})
					return
				}
				this.$tab.navigateTo('/pages/common/vips/vips?fwblj=' + data.fwblj)
			},
			order(i) {
				this.$tab.navigateTo('/pages/mine/order/orderRecord/orderRecord?type=' + i)
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			liseasdfasd(i) {

			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToPwd() {
				this.$tab.navigateTo('/pages/mine/pwd/index')
			},

			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						// this.$clearDictList()

						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			async selectTenant() {
				this.$refs.selectTenant.open()

			},
		}
	}
</script>

<style lang="scss">
	.topbg {
		width: 100%;
		height: 250rpx;
		background: linear-gradient(to right, #00ac04, #00caa4);


	}

	.itemCorlo {
		background-color: $uni-color-primary;
	}

	.primaryFontColor {
		color: $uni-color-primary;
	}

	.mine-container {
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		margin-top: -50rpx;
		// background-color: #f6f6f6;
		// height: 100%;
		margin-bottom: 0rpx;
		color: #000;

		.header-section {

			// background-color: #3c96f3;
			.login-tip {
				font-size: 18px;
				margin-left: 10px;

			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;

			.mine-actions {

				padding: 40rpx 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					margin-bottom: 20rpx;

					.icon {
						font-size: 20px;
					}

					.text {
						display: block;
						font-size: 26rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>